import 'package:flutter/material.dart';
import 'package:flutter_jd/pages/tabbar/category/controller.dart';
import 'package:get/get_state_manager/get_state_manager.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class CategoryList extends GetWidget<CategoryController> {
  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Container(
        color: Colors.white,
        child: ListView(
          children: List.generate(
            controller.productList.length,
            (index) => Container(
              width: double.infinity,
              padding: EdgeInsets.symmetric(
                horizontal: 10.w,
                vertical: 10.h,
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    padding: EdgeInsets.only(left: 5.w, bottom: 8.h),
                    child: Text(
                      controller.productList[index]['title'],
                      style: TextStyle(
                        fontWeight: FontWeight.w500,
                        fontSize: 14.sp,
                      ),
                    ),
                  ),
                  GridView.count(
                    crossAxisCount: 3,
                    crossAxisSpacing: 15.w,
                    mainAxisSpacing: 10.w,
                    childAspectRatio: 1 / 1.4,
                    shrinkWrap: true,
                    physics: NeverScrollableScrollPhysics(),
                    children: List.generate(
                      controller.productList[index]['children'].length,
                      (cIndex) => Container(
                        child: _buildProductListItem(
                          index,
                          cIndex,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  _buildProductListItem(index, cIndex) {
    var item = controller.productList[index]['children'][cIndex];

    return GestureDetector(
      onTap: () {},
      child: Column(
        children: [
          ClipRRect(
            borderRadius: BorderRadius.circular(3.r),
            child: Image.asset(item['src']),
          ),
          Container(
            margin: EdgeInsets.only(top: 8.h),
            child: Text(
              item['name'],
              style: TextStyle(
                color: Color(0xFF666666),
                fontSize: 12.sp,
              ),
            ),
          ),
        ],
      ),
    );
  }
}
